<!doctype html>
<html lang="en">
<head>
    <base href="/">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Epilog Theme">
    <title>Bizlamp - Multipurpose eCommerce HTML Template</title>

    <!-- Favicons -->
    <link rel="icon" type="image/png" href="assets/images/favicon.png">

    <!-- CSS Files -->
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="assets/css/aos.css">
    <link rel="stylesheet" href="assets/css/animate.min.css">
    <link rel="stylesheet" href="assets/css/boxicons.min.css">
    <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/mailform.css">
    <link rel="stylesheet" href="assets/css/style.css?v=1.0.1">
    <link rel="stylesheet" href="assets/css/responsive.css?v=1.0.1">

    <style>
        /* 商品网格布局 */
        .product-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 10px; /* 商品之间的间距 */
        }

        /* 商品卡片样式 */
        .bl-product-item {
            flex: 1 1 calc(20% - 10px); /* 每行显示 5 个商品，减去间距 */
            box-sizing: border-box;
            border: 1px solid #eee;
            border-radius: 8px;
            padding: 10px;
            text-align: center;
        }

        /* 商品图片样式 */
        .bl-product-item-image img {
            width: 100%; /* 图片宽度占满容器 */
            height: 150px; /* 设置固定高度 */
            object-fit: cover; /* 保持图片比例，裁剪多余部分 */
            border-radius: 8px; /* 可选：添加圆角 */
        }

        /* 分页导航样式 */
        .pagination {
            text-align: center;
            margin-top: 20px;
        }

        .pagination button {
            padding: 5px 10px;
            margin: 0 5px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .pagination button:hover {
            background-color: #0056b3;
        }

        .pagination span {
            margin: 0 10px;
        }
    </style>


</head>
<body>
    <!-- Header Area Start -->
    <header class="header-area">
        <div class="main-navbar">
            <ul id="">
            <div class="container">

                <nav class="navbar navbar-expand-lg navbar-light">
                    <a class="navbar-brand" href="shopping/index">
                        <img src="assets/images/logo.png" alt="logo">
                    </a>
                    <ul class="cart-menu responsive">
                        <li>
                            <a id="dropdownCartButton" class="position-relative" data-toggle="dropdown" href="#"><span class="item-count">10</span> <i class="bx bx-cart-alt"></i> </a>
                            <div class="dropdown">
                                <div class="dropdown-menu cart-dropdown" aria-labelledby="dropdownCartButton">
                                    <p>2 item(s) in your cart - <span>$665.00</span></p>
                                    <div class="minicart-products">
                                        <div class="minicart-product-info d-flex">
                                            <figure>
                                                <a href="#"> <img class="img-border" src="assets/images/products/product_01.png" alt="Home Decoration"></a>
                                            </figure>
                                            <div class="product-meta">
                                                <h5 class="product-title">
                                                    <a href="#">Artisan Craft Design Product Handicraft</a>
                                                </h5>
                                                <span class="product-price">1 x $280.00</span>
                                            </div>
                                            <a class="delete-btn" href="#" title="Delete Product">
                                                <span class="item-delete"><i class="bx bx-trash"></i></span>
                                            </a>
                                        </div>
                                        <div class="minicart-product-info d-flex">
                                            <figure>
                                                <a href="#"> <img class="img-border" src="assets/images/products/product_02.png" alt="Home Decoration"></a>
                                            </figure>
                                            <div class="product-meta">
                                                <h5 class="product-title">
                                                    <a href="#">Duis sodales ligula et orci pretium tempus</a>
                                                </h5>
                                                <span class="product-price">1 x $280.00</span>
                                            </div>
                                            <a class="delete-btn" href="#" title="Delete Product">
                                                <span class="item-delete"><i class="bx bx-trash"></i></span>
                                            </a>
                                        </div>

                                        <div class="minicart-product-calculation">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <p><strong>Shipping:</strong> <span>$7.00</span></p>
                                                    <p><strong>Tax:</strong> <span>Free</span></p>
                                                    <p><strong>Total: </strong> <span>$665.00</span></p>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="dcart-action">
                                                        <a href="shopping/cart" class="btn btn-primary">View Cart</a>
                                                        <a href="checkout.html" class="btn btn-secondary">Checkout</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>

                        </li>
                        <li>
                            <a id="dropdownUserButton" data-toggle="dropdown" href="#"><i class="bx bx-user-circle"></i> </a>
                            <div class="dropdown">
                                <div class="dropdown-menu user-dropdown" aria-labelledby="dropdownUserButton">

                                    <a class="dropdown-item" href="shopping/my"><i class="bx bx-user-circle"></i> My Account</a>
                                    <a class="dropdown-item" href="#"><i class="bx bx-heart"></i> My Wishlist</a>
                                    <a class="dropdown-item" href="#"><i class="bx bx-cart-alt"></i> Checkout</a>
                                    <a class="dropdown-item" href="#"><i class="bx bx-log-in"></i> Login Or Register</a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <form class="searchbox">
                                <input type="search" placeholder="Search......" name="search" class="searchbox-input" required="">
                                <button class="searchbox-submit" type="submit"><i class="bx bx-search-alt"></i></button>
                            </form>
                            <a class="search-btn"><i class="bx bx-search-alt"></i></a>
                        </li>
                        <li>
                            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                                <i class='bx bx-menu'></i>
                                <i class='bx bx-x'></i>
                            </button>
                        </li>
                    </ul>

                    <div class="collapse navbar-collapse mean-menu" id="navbarCollapse">
                        <ul class="navbar-nav mr-auto">
                            <li class="nav-item dropdown">
                                <a class="nav-link active" href="shopping/index">
                                    首页
                                </a>
                            </li>
                            <li class="nav-item dropdown">
                                <a class="nav-link" href="#" data-toggle="dropdown" aria-expanded="false">
                                    购物 <i class="bx bx-chevron-down"></i>
                                </a>
                                <ul class="dropdown-menu">
                                    <li class="nav-item"><a href="shopping/cart" class="nav-link">购物车</a></li>
                                </ul>
                            </li>

                            <li class="nav-item dropdown megamenu">
                                <a class="nav-link" href="#" data-toggle="dropdown" aria-expanded="false">
                                    商品 <i class="bx bx-chevron-down"></i>
                                </a>
                                <ul class="dropdown-menu">
                                    <li class="nav-item">
                                        <div class="container">
                                            <div class="row" id="categorylist">


<!--                                                <div class="col-md-3 col-sm-6 col-xs-6 ">-->
<!--                                                    <h6 class="submenu-title">Women</h6>-->
<!--                                                    <ul class="megamenu-submenu">-->
<!--                                                        <li><a href="#">Consectetur adipiscing elit</a></li>-->
<!--                                                        <li><a href="#">Pellentesque facilisis</a></li>-->
<!--                                                        <li><a href="#">Vivamus at sapien</a></li>-->
<!--                                                        <li><a href="#">Elementum urna</a></li>-->
<!--                                                        <li><a href="#">Sed et mauris</a></li>-->
<!--                                                        <li><a href="#">Sed sit amet purus</a></li>-->
<!--                                                        <li><a href="#">Tristique ac faucibus</a></li>-->
<!--                                                    </ul>-->
<!--                                                </div>-->

<!--                                                <div class="col-md-3 col-sm-6 col-xs-6 ">-->
<!--                                                    <h6 class="submenu-title">Baby</h6>-->
<!--                                                    <ul class="megamenu-submenu">-->
<!--                                                        <li><a href="#">Consectetur adipiscing elit</a></li>-->
<!--                                                        <li><a href="#">Pellentesque facilisis</a></li>-->
<!--                                                        <li><a href="#">Vivamus at sapien</a></li>-->
<!--                                                        <li><a href="#">Elementum urna</a></li>-->
<!--                                                        <li><a href="#">Sed et mauris</a></li>-->
<!--                                                        <li><a href="#">Sed sit amet purus</a></li>-->
<!--                                                        <li><a href="#">Tristique ac faucibus</a></li>-->
<!--                                                    </ul>-->
<!--                                                </div>-->

<!--                                                <div class="col-md-3 col-sm-6 col-xs-6 ">-->
<!--                                                    <h6 class="submenu-title">Accessories</h6>-->

<!--                                                    <ul class="megamenu-submenu">-->
<!--                                                        <li><a href="#">Consectetur adipiscing elit</a></li>-->
<!--                                                        <li><a href="#">Pellentesque facilisis</a></li>-->
<!--                                                        <li><a href="#">Vivamus at sapien</a></li>-->
<!--                                                        <li><a href="#">Elementum urna</a></li>-->
<!--                                                        <li><a href="#">Sed et mauris</a></li>-->
<!--                                                        <li><a href="#">Sed sit amet purus</a></li>-->
<!--                                                        <li><a href="#">Tristique ac faucibus</a></li>-->
<!--                                                    </ul>-->
<!--                                                </div>-->
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </li>

                            <li class="nav-item dropdown">
                                <a class="nav-link" href="#" data-toggle="dropdown" aria-expanded="false">
                                    页面 <i class="bx bx-chevron-down"></i>
                                </a>
                                <ul class="dropdown-menu">

                                    <li class="nav-item"><a href="shopping/signin" class="nav-link">登录</a></li>
                                    <li class="nav-item"><a href="shopping/signup" class="nav-link">注册</a></li>

                                </ul>

                            </li>


                        </ul>
                        <ul class="cart-menu">
                            <li>
                                <a class="position-relative" data-toggle="dropdown" href="#"><span class="item-count">10</span><i class='bx bx-cart-alt' ></i></a>
                                <div class="dropdown">
                                    <div class="dropdown-menu cart-dropdown" aria-labelledby="dropdownCartButton">
                                        <p>2 item(s) in your cart - <span>$665.00</span></p>
                                        <div class="minicart-products">
                                            <div class="minicart-product-info d-flex">
                                                <figure>
                                                    <a href="#"> <img class="img-border" src="assets/images/products/product_01.png" alt="Home Decoration"></a>
                                                </figure>
                                                <div class="product-meta">
                                                    <h5 class="product-title">
                                                        <a href="#">Artisan Craft Design Product Handicraft</a>
                                                    </h5>
                                                    <span class="product-price">1 x $280.00</span>
                                                </div>
                                                <a class="delete-btn" href="#" title="Delete Product">
                                                    <span class="item-delete"><i class="bx bx-trash"></i></span>
                                                </a>
                                            </div>
                                            <div class="minicart-product-info d-flex">
                                                <figure>
                                                    <a href="#"> <img class="img-border" src="assets/images/products/product_02.png" alt="Home Decoration"></a>
                                                </figure>
                                                <div class="product-meta">
                                                    <h5 class="product-title">
                                                        <a href="#">Duis sodales ligula et orci pretium tempus</a>
                                                    </h5>
                                                    <span class="product-price">1 x $280.00</span>
                                                </div>
                                                <a class="delete-btn" href="#" title="Delete Product">
                                                    <span class="item-delete"><i class="bx bx-trash"></i></span>
                                                </a>
                                            </div>


                                            <div class="minicart-product-calculation">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <p><strong>Shipping:</strong> <span>$7.00</span></p>
                                                        <p><strong>Tax:</strong> <span>Free</span></p>
                                                        <p><strong>Total: </strong> <span>$665.00</span></p>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="dcart-action">
                                                            <a href="shopping/cart" class="btn btn-primary">View Cart</a>
                                                            <a href="checkout.html" class="btn btn-secondary">Checkout</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <a data-toggle="dropdown" href="#"><i class='bx bx-user-circle' ></i></a>
                                <div class="dropdown">
                                    <div class="dropdown-menu user-dropdown" aria-labelledby="dropdownUserButton">

                                        <a class="dropdown-item" href="shopping/my"><i class='bx bx-user-circle' ></i> 个人中心</a>

                                    </div>
                                </div>
                            </li>
                            <li>
                                <form class="searchbox">
                                    <input type="search" placeholder="Search......" name="search" class="searchbox-input" required>
                                    <button class="searchbox-submit" type="submit"><i class="bx bx-search-alt"></i></button>
                                </form>
                                <a class="search-btn"><i class='bx bx-search-alt' ></i></a>
                            </li>
                        </ul>
                    </div>
                </nav>

            </div>
            </ul>
        </div>

    </header>
    <!-- Header Area End -->

    <!-- Home Page Slider Area Start -->
    <div class="home-slider owl-carousel owl-theme">
        <div class="item">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 col-md-6 col-sm-12">
                        <div class="slider-caption-text" data-aos="fade-up" data-aos-duration="1500">
                            <h4>Limited Edition</h4>
                            <h2>Find Products That's Right For You <span>$199</span></h2>
                            <p>Phasellus eget nisl pellentesque arcu cursus eleifend quis vel massa. Etiam ac condimentum tellus, vel tincidunt turpis. Sed vel odio at sapien elementum pretium. Integer faucibus felis quis luctus blandit.</p>
                            <a class="shop-now" href="#">Shop Now</a>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-12">
                        <div class="slider-image">
                            <img class="img-fluid" src="assets/images/banner-img2.png" alt="Slider Image">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 col-md-6 col-sm-12">
                        <div class="slider-caption-text">
                            <h4 data-aos="fade-up" data-aos-duration="500">Limited Edition 2</h4>
                            <h2 data-aos="fade-up" data-aos-duration="500">Etiam ac condimentum tellus <span>$500</span></h2>
                            <p data-aos="fade-up" data-aos-duration="500">Phasellus eget nisl pellentesque arcu cursus eleifend quis vel massa. Etiam ac condimentum tellus, vel tincidunt turpis. Sed vel odio at sapien elementum pretium. Integer faucibus felis quis luctus blandit.</p>
                            <a data-aos-duration="500" data-aos="fade-up" class="shop-now" href="#">Shop Now</a>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-12">
                        <div class="slider-image">
                            <img class="img-fluid" src="assets/images/banner-img1.png" alt="Slider Image">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Home Page  Slider Area End -->

    <!-- Facilities Area Start -->
    <div class="facilities">
        <div class="container">
            <div class="row">
                <div class="col-sm-6 col-md-3 col-lg-3">
                    <div class="facilities-item">
                        <img src="assets/images/free-shipping.png" alt="Free Shipping">
                        <h4>Free Shipping</h4>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3 col-lg-3">
                    <div class="facilities-item">
                        <img src="assets/images/secured-payments.png" alt="Secured Payment">
                        <h4>Secured Payment</h4>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3 col-lg-3">
                    <div class="facilities-item">
                        <img src="assets/images/cash-back-guarantee.png" alt="Cash Back Guarantee">
                        <h4>Cash Back Guarantee</h4>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3 col-lg-3">
                    <div class="facilities-item">
                        <img src="assets/images/support.png" alt="Support">
                        <h4>24/7 Support</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Facilities Area End -->




    </div>

    <!-- Box Banner Area Start -->
    <div class="box-banner">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div style="background: url('assets/images/banner_01.png')" class="box-banner-area text-center">
                        <div class="box-banner-area-text">
                            <h3>开始选购</h3>
                            <p>Mauris a ligula et lacus euismod lacinia. Curabitur mi lacus, feugiat quis tortor sit amet, faucibus iaculis  urna euismod lectus,</p>
                            <a href="shopping/shop" class="shop-now">Shop Now</a>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!-- Box Banner Area Start -->

    <!-- Selling Product Area Start -->
    <div class="bl-products-wrapper">
        <div class="container">
            <div class="section-title"><h3>Top Selling Product In This Week</h3></div>
            <div class="product-carousel owl-carousel owl-theme">
                <div class="row">
                    <div class="col-lg-3  col-md-4 col-sm-6">
                        <div class="bl-product-item">
                            <div class="bl-product-item-image">
                                <a href="shopping/product"><img src="assets/images/products/product_01.png" alt="Product 1"></a>
                                <div class="add-to-cart">
                                    <a href="#" class="btn-add-to-cart"><i class='bx bx-cart-alt' ></i></a>
                                </div>
                            </div>
                            <div class="bl-product-item-description d-flex">
                                <div class="bl-product-item-price">$18.00</div>
                                <div class="bl-product-item-name"><a href="shopping/product">Pink Dress</a></div>
                            </div>
                            <div class="bl-product-item-hover-description text-center">
                                <div class="bl-product-item-price">$18.00</div>
                                <div class="bl-product-item-name"><a href="shopping/product">Pink Dress</a></div>
                                <div class="star-rating d-flex justify-content-center">
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3  col-md-4 col-sm-6">
                        <div class="bl-product-item">
                            <div class="bl-product-item-image">
                                <a href="shopping/product"><img src="assets/images/products/product_02.png" alt="Product 2"></a>
                                <div class="add-to-cart">
                                    <a href="#" class="btn-add-to-cart"><i class='bx bx-cart-alt' ></i></a>
                                </div>
                            </div>
                            <div class="bl-product-item-description d-flex">
                                <div class="bl-product-item-price">$18.00</div>
                                <div class="bl-product-item-name"><a href="shopping/product">Smart Watch</a></div>
                            </div>
                            <div class="bl-product-item-hover-description text-center">
                                <div class="bl-product-item-price">$18.00</div>
                                <div class="bl-product-item-name"><a href="shopping/product">Smart Watch</a></div>
                                <div class="star-rating d-flex justify-content-center">
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3  col-md-4 col-sm-6">
                        <div class="bl-product-item">
                            <div class="bl-product-item-image">
                                <a href="shopping/product"><img src="assets/images/products/product_03.png" alt="Product 3"></a>
                                <div class="add-to-cart">
                                    <a href="#" class="btn-add-to-cart"><i class='bx bx-cart-alt' ></i></a>
                                </div>
                            </div>
                            <div class="bl-product-item-description d-flex">
                                <div class="bl-product-item-price">$18.00</div>
                                <div class="bl-product-item-name"><a href="shopping/product">Formal Watch</a></div>
                            </div>
                            <div class="bl-product-item-hover-description text-center">
                                <div class="bl-product-item-price">$18.00</div>
                                <div class="bl-product-item-name"><a href="shopping/product">Formal Watch</a></div>
                                <div class="star-rating d-flex justify-content-center">
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3  col-md-4 col-sm-6">
                        <div class="bl-product-item">
                            <div class="bl-product-item-image">
                                <a href="shopping/product"><img src="assets/images/products/product_04.png" alt="Product 4"></a>
                                <div class="add-to-cart">
                                    <a href="#" class="btn-add-to-cart"><i class='bx bx-cart-alt' ></i></a>
                                </div>
                            </div>
                            <div class="bl-product-item-description d-flex">
                                <div class="bl-product-item-price">$18.00</div>
                                <div class="bl-product-item-name"><a href="shopping/product">Woman Bag</a></div>
                            </div>
                            <div class="bl-product-item-hover-description text-center">
                                <div class="bl-product-item-price">$18.00</div>
                                <div class="bl-product-item-name"><a href="shopping/product">Woman Bag</a></div>
                                <div class="star-rating d-flex justify-content-center">
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="row">
                    <div class="col-lg-3  col-md-4 col-sm-6">
                        <div class="bl-product-item">
                            <div class="bl-product-item-image">
                                <a href="shopping/product"><img src="assets/images/products/product_05.png" alt="Product 1"></a>
                                <div class="add-to-cart">
                                    <a href="#" class="btn-add-to-cart"><i class='bx bx-cart-alt' ></i></a>
                                </div>
                            </div>
                            <div class="bl-product-item-description d-flex">
                                <div class="bl-product-item-price">$18.00</div>
                                <div class="bl-product-item-name"><a href="shopping/product">Desktop Computer</a></div>
                            </div>
                            <div class="bl-product-item-hover-description text-center">
                                <div class="bl-product-item-price">$18.00</div>
                                <div class="bl-product-item-name"><a href="shopping/product">Desktop Computer</a></div>
                                <div class="star-rating d-flex justify-content-center">
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3  col-md-4 col-sm-6">
                        <div class="bl-product-item">
                            <div class="bl-product-item-image">
                                <a href="shopping/product"><img src="assets/images/products/product_06.png" alt="Product 2"></a>
                                <div class="add-to-cart">
                                    <a href="#" class="btn-add-to-cart"><i class='bx bx-cart-alt' ></i></a>
                                </div>
                            </div>
                            <div class="bl-product-item-description d-flex">
                                <div class="bl-product-item-price">$18.00</div>
                                <div class="bl-product-item-name"><a href="shopping/product">Sports Shoe</a></div>
                            </div>
                            <div class="bl-product-item-hover-description text-center">
                                <div class="bl-product-item-price">$18.00</div>
                                <div class="bl-product-item-name"><a href="shopping/product">Sports Shoe</a></div>
                                <div class="star-rating d-flex justify-content-center">
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3  col-md-4 col-sm-6">
                        <div class="bl-product-item">
                            <div class="bl-product-item-image">
                                <a href="shopping/product"><img src="assets/images/products/product_07.png" alt="Product 3"></a>
                                <div class="add-to-cart">
                                    <a href="#" class="btn-add-to-cart"><i class='bx bx-cart-alt' ></i></a>
                                </div>
                            </div>
                            <div class="bl-product-item-description d-flex">
                                <div class="bl-product-item-price">$18.00</div>
                                <div class="bl-product-item-name"><a href="shopping/product">Ladies Hill</a></div>
                            </div>
                            <div class="bl-product-item-hover-description text-center">
                                <div class="bl-product-item-price">$18.00</div>
                                <div class="bl-product-item-name"><a href="shopping/product">Ladies Hill</a></div>
                                <div class="star-rating d-flex justify-content-center">
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3  col-md-4 col-sm-6">
                        <div class="bl-product-item">
                            <div class="bl-product-item-image">
                                <a href="shopping/product"><img src="assets/images/products/product_08.png" alt="Product 8"></a>
                                <div class="add-to-cart">
                                    <a href="#" class="btn-add-to-cart"><i class='bx bx-cart-alt' ></i></a>
                                </div>
                            </div>
                            <div class="bl-product-item-description d-flex">
                                <div class="bl-product-item-price">$18.00</div>
                                <div class="bl-product-item-name"><a href="shopping/product">Jordan Dress</a></div>
                            </div>
                            <div class="bl-product-item-hover-description text-center">
                                <div class="bl-product-item-price">$18.00</div>
                                <div class="bl-product-item-name"><a href="shopping/product">Jordan Dress</a></div>
                                <div class="star-rating d-flex justify-content-center">
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Selling Product Area End -->

    <!-- Flash Sale Area Start -->
    <div class="flash-sale">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 col-md-12">
                    <div class="flash-sale-text">
                        <h3>Flash Sale</h3>
                        <h6>Discount Up To 30%</h6>
                    </div>
                </div>
                <div class="col-lg-8 col-md-12">
                    <div class="countdown-wrapper">
                        <div class="offer-countdown">
                            <div id="timer" class="d-flex justify-content-center">
                                <div id="days"></div>
                                <div id="hours"></div>
                                <div id="minutes"></div>
                                <div id="seconds"></div>
                            </div>
                        </div>
                        <a href="#" class="shop-now">Shop Now</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Flash Sale Area End -->

    <!-- Popular Search Area Start -->
    <div class="bl-products-wrapper">
        <div class="container">
            <div class="section-title"><h3>Popular Search</h3></div>
            <div class="product-carousel owl-carousel owl-theme">
                <div class="row">
                    <div class="col-lg-3  col-md-4 col-sm-6">
                        <div class="bl-product-item">
                            <div class="bl-product-item-image">
                                <a href="shopping/product"><img src="assets/images/products/product_01.png" alt="Product 1"></a>
                                <div class="add-to-cart">
                                    <a href="#" class="btn-add-to-cart"><i class='bx bx-cart-alt' ></i></a>
                                </div>
                            </div>
                            <div class="bl-product-item-description d-flex">
                                <div class="bl-product-item-price">$18.00</div>
                                <div class="bl-product-item-name"><a href="shopping/product">Pink Dress</a></div>
                            </div>
                            <div class="bl-product-item-hover-description text-center">
                                <div class="bl-product-item-price">$18.00</div>
                                <div class="bl-product-item-name"><a href="shopping/product">Pink Dress</a></div>
                                <div class="star-rating d-flex justify-content-center">
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3  col-md-4 col-sm-6">
                        <div class="bl-product-item">
                            <div class="bl-product-item-image">
                                <a href="shopping/product"><img src="assets/images/products/product_02.png" alt="Product 2"></a>
                                <div class="add-to-cart">
                                    <a href="#" class="btn-add-to-cart"><i class='bx bx-cart-alt' ></i></a>
                                </div>
                            </div>
                            <div class="bl-product-item-description d-flex">
                                <div class="bl-product-item-price">$18.00</div>
                                <div class="bl-product-item-name"><a href="shopping/product">Smart Watch</a></div>
                            </div>
                            <div class="bl-product-item-hover-description text-center">
                                <div class="bl-product-item-price">$18.00</div>
                                <div class="bl-product-item-name"><a href="shopping/product">Smart Watch</a></div>
                                <div class="star-rating d-flex justify-content-center">
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3  col-md-4 col-sm-6">
                        <div class="bl-product-item">
                            <div class="bl-product-item-image">
                                <a href="shopping/product"><img src="assets/images/products/product_03.png" alt="Product 3"></a>
                                <div class="add-to-cart">
                                    <a href="#" class="btn-add-to-cart"><i class='bx bx-cart-alt' ></i></a>
                                </div>
                            </div>
                            <div class="bl-product-item-description d-flex">
                                <div class="bl-product-item-price">$18.00</div>
                                <div class="bl-product-item-name"><a href="shopping/product">Formal Watch</a></div>
                            </div>
                            <div class="bl-product-item-hover-description text-center">
                                <div class="bl-product-item-price">$18.00</div>
                                <div class="bl-product-item-name"><a href="shopping/product">Formal Watch</a></div>
                                <div class="star-rating d-flex justify-content-center">
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3  col-md-4 col-sm-6">
                        <div class="bl-product-item">
                            <div class="bl-product-item-image">
                                <a href="shopping/product"><img src="assets/images/products/product_04.png" alt="Product 4"></a>
                                <div class="add-to-cart">
                                    <a href="#" class="btn-add-to-cart"><i class='bx bx-cart-alt' ></i></a>
                                </div>
                            </div>
                            <div class="bl-product-item-description d-flex">
                                <div class="bl-product-item-price">$18.00</div>
                                <div class="bl-product-item-name"><a href="shopping/product">Woman Bag</a></div>
                            </div>
                            <div class="bl-product-item-hover-description text-center">
                                <div class="bl-product-item-price">$18.00</div>
                                <div class="bl-product-item-name"><a href="shopping/product">Woman Bag</a></div>
                                <div class="star-rating d-flex justify-content-center">
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="row">
                    <div class="col-lg-3  col-md-4 col-sm-6">
                        <div class="bl-product-item">
                            <div class="bl-product-item-image">
                                <a href="shopping/product"><img src="assets/images/products/product_05.png" alt="Product 1"></a>
                                <div class="add-to-cart">
                                    <a href="#" class="btn-add-to-cart"><i class='bx bx-cart-alt' ></i></a>
                                </div>
                            </div>
                            <div class="bl-product-item-description d-flex">
                                <div class="bl-product-item-price">$18.00</div>
                                <div class="bl-product-item-name"><a href="shopping/product">Desktop Computer</a></div>
                            </div>
                            <div class="bl-product-item-hover-description text-center">
                                <div class="bl-product-item-price">$18.00</div>
                                <div class="bl-product-item-name"><a href="shopping/product">Desktop Computer</a></div>
                                <div class="star-rating d-flex justify-content-center">
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3  col-md-4 col-sm-6">
                        <div class="bl-product-item">
                            <div class="bl-product-item-image">
                                <a href="shopping/product"><img src="assets/images/products/product_06.png" alt="Product 2"></a>
                                <div class="add-to-cart">
                                    <a href="#" class="btn-add-to-cart"><i class='bx bx-cart-alt' ></i></a>
                                </div>
                            </div>
                            <div class="bl-product-item-description d-flex">
                                <div class="bl-product-item-price">$18.00</div>
                                <div class="bl-product-item-name"><a href="shopping/product">Sports Shoe</a></div>
                            </div>
                            <div class="bl-product-item-hover-description text-center">
                                <div class="bl-product-item-price">$18.00</div>
                                <div class="bl-product-item-name"><a href="shopping/product">Sports Shoe</a></div>
                                <div class="star-rating d-flex justify-content-center">
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3  col-md-4 col-sm-6">
                        <div class="bl-product-item">
                            <div class="bl-product-item-image">
                                <a href="shopping/product"><img src="assets/images/products/product_07.png" alt="Product 3"></a>
                                <div class="add-to-cart">
                                    <a href="#" class="btn-add-to-cart"><i class='bx bx-cart-alt' ></i></a>
                                </div>
                            </div>
                            <div class="bl-product-item-description d-flex">
                                <div class="bl-product-item-price">$18.00</div>
                                <div class="bl-product-item-name"><a href="shopping/product">Ladies Hill</a></div>
                            </div>
                            <div class="bl-product-item-hover-description text-center">
                                <div class="bl-product-item-price">$18.00</div>
                                <div class="bl-product-item-name"><a href="shopping/product">Ladies Hill</a></div>
                                <div class="star-rating d-flex justify-content-center">
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3  col-md-4 col-sm-6">
                        <div class="bl-product-item">
                            <div class="bl-product-item-image">
                                <a href="shopping/product"><img src="assets/images/products/product_08.png" alt="Product 8"></a>
                                <div class="add-to-cart">
                                    <a href="#" class="btn-add-to-cart"><i class='bx bx-cart-alt' ></i></a>
                                </div>
                            </div>
                            <div class="bl-product-item-description d-flex">
                                <div class="bl-product-item-price">$18.00</div>
                                <div class="bl-product-item-name"><a href="shopping/product">Jordan Dress</a></div>
                            </div>
                            <div class="bl-product-item-hover-description text-center">
                                <div class="bl-product-item-price">$18.00</div>
                                <div class="bl-product-item-name"><a href="shopping/product">Jordan Dress</a></div>
                                <div class="star-rating d-flex justify-content-center">
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                    <i class="bx bxs-star"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Popular Search Area End -->

    <!-- Subscribe Area Start -->
    <div class="subscribe-wrapper">
        <div class="container">
            <div class="subscribe text-center">
                <h3>25% Membership Discount</h3>
                <p>Nam cursus nec massa quis porttitor. Nunc vel nulla et arcu fermentum vestibulum eu malesuada neque. Sed eget lorem nec enim molestie auctor id at metus. Suspendisse dapibus interdum lacus, ornare rhoncus erat ornare id. Ut interdum lorem eu posuere laoreet.</p>
                <form class="subscribe-form" action="#" method="post">
                    <input type="email" name="email" placeholder="Enter Your Email">
                    <button class="subscribe-submit" type="submit">Subscribe</button>
                </form>
            </div>
        </div>
    </div>
    <!-- Subscribe Area End -->


    <!-- Blog Area Start -->
    <div class="bl-blog-wrapper">
        <div class="container">
            <div class="section-title"><h3>Get News Form Blog</h3></div>
            <div class="blog-carousel owl-carousel owl-theme">
                <div class="bl-blog-item">
                    <div class="bl-blog-item-image">
                        <img src="assets/images/blog/blog_image_01.png" alt="Blog">
                    </div>
                    <div class="bl-blog-item-info text-center">
                        <div class="bl-blog-item-date"><a href="#">20 June 2020</a></div>
                        <div class="bl-blog-item-category"><h6><a href="#">Fashion Business</a></h6></div>
                        <div class="bl-blog-item-name"><h3><a href="blog-details.html">Mauris a ligula et lacus euismod Curabitur mi lacus</a></h3></div>
                        <a class="read-more" href="blog-details.html">Read More <i class='bx bx-right-arrow-alt bx-fade-right' ></i></a>
                    </div>
                </div>
                <div class="bl-blog-item">
                    <div class="bl-blog-item-image">
                        <img src="assets/images/blog/blog_image_02.png" alt="Blog">
                    </div>
                    <div class="bl-blog-item-info text-center">
                        <div class="bl-blog-item-date"><a href="#">20 June 2020</a></div>
                        <div class="bl-blog-item-category"><h6><a href="#">Fashion Business</a></h6></div>
                        <div class="bl-blog-item-name"><h3><a href="blog-details.html">Mauris a ligula et lacus euismod Curabitur mi lacus</a></h3></div>
                        <a class="read-more" href="blog-details.html">Read More <i class='bx bx-right-arrow-alt bx-fade-right' ></i></a>
                    </div>
                </div>
                <div class="bl-blog-item">
                    <div class="bl-blog-item-image">
                        <img src="assets/images/blog/blog_image_03.png" alt="Blog">
                    </div>
                    <div class="bl-blog-item-info text-center">
                        <div class="bl-blog-item-date"><a href="#">20 June 2020</a></div>
                        <div class="bl-blog-item-category"><h6><a href="#">Fashion Business</a></h6></div>
                        <div class="bl-blog-item-name"><h3><a href="blog-details.html">Mauris a ligula et lacus euismod Curabitur mi lacus</a></h3></div>
                        <a class="read-more" href="blog-details.html">Read More <i class='bx bx-right-arrow-alt bx-fade-right' ></i></a>
                    </div>
                </div>
                <div class="bl-blog-item">
                    <div class="bl-blog-item-image">
                        <img src="assets/images/blog/blog_image_03.png" alt="Blog">
                    </div>
                    <div class="bl-blog-item-info text-center">
                        <div class="bl-blog-item-date"><a href="#">20 June 2020</a></div>
                        <div class="bl-blog-item-category"><h6><a href="#">Fashion Business</a></h6></div>
                        <div class="bl-blog-item-name"><h3><a href="blog-details.html">Mauris a ligula et lacus euismod Curabitur mi lacus</a></h3></div>
                        <a class="read-more" href="blog-details.html">Read More <i class='bx bx-right-arrow-alt bx-fade-right' ></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Blog Area End -->


    <!--  Footer Section Start -->
    <div class="footer">
        <div class="footer-wrapper">
            <div class="container">
                <div class="row">
                    <div class="col-sm-6 col-md-6 col-xl-3">
                        <div class="footer-widget footer-social-lcon">
                            <img src="assets/images/logo-white.png" alt="Footer Logo">
                            <br>
                            <p>Donec scelerisque augue libero. Nunc pulvinar porttitor malesuada. Nam non turpis sit amet nisl dignissim rhoncus condimentum et lectus.</p>
                            <ul class="social-icon">
                                <li><a href="#"><i class='bx bxl-facebook-square'></i></a></li>
                                <li><a href="#"><i class='bx bxl-twitter' ></i></a></li>
                                <li><a href="#"><i class='bx bxl-linkedin-square' ></i></a></li>
                                <li><a href="#"><i class='bx bxl-pinterest' ></i></a></li>
                                <li><a href="#"><i class='bx bxl-youtube' ></i></a></li>
                            </ul>

                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6 col-xl-3">
                        <div class="footer-widget">
                            <h4 class="footer-title">Contact Us</h4>
                            <div class="contact-info">
                                <p><strong>Hotline: </strong>16768</p>
                                <p><strong>Phone: </strong>(+123) 456-657878</p>
                                <p><strong>Email: </strong><a href="mailto:someone@example.com">someone@example.com</a></p>
                                <p><strong>Address: </strong>6757 Blvd, The Bronx, NY 1058, USA</p>
                            </div>

                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6 col-xl-3">
                        <div class="footer-widget">
                            <h4 class="footer-title">Information</h4>
                            <ul class="footer-menu">
                                <li><a href="#"><i class='bx bx-radio-circle' ></i> About Us</a></li>
                                <li><a href="#"><i class='bx bx-radio-circle' ></i> Privacy Policy</a></li>
                                <li><a href="#"><i class='bx bx-radio-circle' ></i> Terms & Conditions</a></li>
                                <li><a href="#"><i class='bx bx-radio-circle' ></i> Delivery Information</a></li>
                                <li><a href="#"><i class='bx bx-radio-circle' ></i> Order and Returns</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6 col-xl-3">
                        <div class="footer-widget">
                            <h4 class="footer-title">Subscribe</h4>
                            <p>Subscrive to our newsletter, so that you can be the first product offer.</p>
                            <form action="shopping/index" method="post">
                                <input type="text" class="form-control" placeholder="Enter Your Email Address" name="subscribe">
                                <button type="submit" class="btn btn-primary">Subscribe Now</button>
                            </form>

                            <img class="img-fluid mt-2" src="assets/images/we-accept-payment.png" alt="We Accept">
                        </div>
                    </div>
                </div>

            </div>
            <div class="footer-copyright">
                <p class="copyright-text">Copyright &copy; 2025 <a target="_blank" href="https://www.mobanwang.com/" title="网站模板">网站模板</a></p>
            </div>
        </div>



    </div>

    <!--  Footer Section Start -->

    <!--  Top to Bottom  -->
    <div class="top-bottom-scroll"><i class='bx bx-chevrons-up bx-fade-up' ></i></div>

    <!-- JS Script -->
    <script src="./assets/js/jquery.min.js"></script>
    <script src="./assets/js/bootstrap.min.js"></script>
    <script src="./assets/js/popper.min.js"></script>
    <script src="./assets/js/aos.js"></script>
    <script src="./assets/js/mailform.js"></script>
    <script src="./assets/js/owl.carousel.min.js"></script>
    <script src="./assets/js/main.js?v=1.0.0"></script>

    <script src="layui/layui.all.js"></script>


    <script type="text/html" id="categoryitem">
        <div class="col-md-3 col-sm-6 col-xs-6">
            <h6 class="submenu-title"><a href="#"></a></h6>
            <ul class="megamenu-submenu"></ul>
        </div>
    </script>

    <script type="text/html" id="categorychild">
        <li><a href="#">
            <span></span>
        </a></li>
    </script>

    <script>
        const $ = layui.$;

        // 获取一级分类
        $.ajax({
            url: 'category/list',
            data: { id: -1 },
            async: false, // 改为同步请求确保顺序
            success: function(result) {
                const data = result.data;
                $("#categorylist").empty(); // 清空原有内容

                data.forEach(parentCat => {
                    // 创建分类容器

                        const $item = $($("#categoryitem").html());

                        // 填充父级分类名称
                        $item.find("h6 a")
                            .text(parentCat.name)
                            .attr("href", `shop.html?category=${parentCat.categoryid}`);

                        // 获取子分类
                        $.ajax({
                            url: "category/getChildren",
                            data: {id: parentCat.categoryid},
                            async: false, // 同步请求确保子分类顺序
                            success: function (res) {
                                const $submenu = $item.find("ul");
                                res.forEach(childCat => {
                                    const $child = $($("#categorychild").html());
                                    $child.find("span")
                                        .text(childCat.name)
                                        .parent()
                                        .attr("href", `shop.html?category=${childCat.categoryid}`);
                                    $submenu.append($child);
                                });
                            }
                        });

                    $("#categorylist").append($item);
                });
            }
        });

    </script>

    <style>
        /* 新增分类菜单样式 */
        .megamenu-submenu {
            padding-left: 15px;
            list-style: none;
        }
        .megamenu-submenu li {
            margin: 8px 0;
        }
        .submenu-title {
            font-size: 16px;
            margin-bottom: 12px;
            border-bottom: 1px solid #eee;
            padding-bottom: 8px;
        }
        .submenu-title a {
            color: #333;
            font-weight: bold;
        }
        .megamenu-submenu a {
            color: #666;
            transition: all 0.3s;
        }
        .megamenu-submenu a:hover {
            color: #007bff;
            padding-left: 5px;
        }
    </style>

<script type="text/html" id="productitem">
    <div className="col-lg-3  col-md-4 col-sm-6">
        <div className="bl-product-item">
            <div className="bl-product-item-image">
                <a href="shopping/product"><img src="assets/images/products/product_01.png" alt="Product 1"/></a>
                <div className="add-to-cart">
                    <a href="#" className="btn-add-to-cart"><i className='bx bx-cart-alt'></i></a>
                </div>
            </div>
            <div className="bl-product-item-description d-flex">
                <div className="bl-product-item-price">$18.00</div>
                <div className="bl-product-item-name"><a href="shopping/product?id=1">Pink Dress</a></div>
            </div>
            <div className="bl-product-item-hover-description text-center">
                <div className="bl-product-item-price">$18.00</div>
                <div className="bl-product-item-name"><a href="shopping/product?productid=1">Pink Dress</a></div>
                <div className="star-rating d-flex justify-content-center">
                    <i className="bx bxs-star"></i>
                    <i className="bx bxs-star"></i>
                    <i className="bx bxs-star"></i>
                    <i className="bx bxs-star"></i>
                    <i className="bx bxs-star"></i>
                </div>
            </div>
        </div>
    </div>

</script>


</body>
</html>